<template>
  <div>
    <div class="calendarLeft bgf mb16">
      <div class="importantDocuments">
        <div class="newsList">
          <div class="newsLists">
            <FullCalendar ref="fullCalendar" default-view="dayGridMonth" locale="en" :header="{
              left: 'prev,next',
              center: 'title',
              right: '',
            }" :fixed-week-count="false" height="auto" :plugins="calendarPlugins" :events="getCalendarEvents"
              @dateClick="handleDateClick" @datesRender="handleMonthChange" />
          </div>
        </div>
      </div>
      <div v-if="newsMeetingdata.length > 0">
        <h4 class="rc_body">我的会议日程</h4>
        <div>
          <div class="rc_list" v-for="(item, index) in newsMeetingdata" :key="item.mid + index + Math.random()">
            <h5 class="rc_title" v-if="item.meetType == '1'">赞助会议</h5>
            <h5 class="rc_title" v-if="item.meetType == '2'">定制会议</h5>
            <h5 class="rc_title" v-if="item.meetType == '3'">自助会议</h5>
            <div class="rc_bt">
              <span class="rc_content sl1">{{ item.title }}</span>
              <span class="rc_butn" @click="goInfo(item)">赞助详情</span>
            </div>
            <div class="fs12 col4f5" style="color: #a3adb7">
              {{ item.startTime }}--{{ item.videoEndDate }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="newsMeetingdata2.length > 0">
        <h4 class="rc_body2">我的会议日程</h4>
        <div>
          <div class="rc_list2" v-for="(item, indexs) in newsMeetingdata2" :key="item.mid + indexs + 'ril'">
            <div class="flex mt15" @click="goInfo(item)">
              <div class="rc_date">
                <span class="rc_date_y">{{ item.videoMonth }}</span>
                {{ item.startTime.split("日")[0].split("月")[1] }}
              </div>
              <div class="rc_bt2">
                <div>
                  <span class="rc_content sl1">{{ item.title }}</span>
                  <div class="fs12 col7e8">
                    {{ item.startTime }}--{{ item.videoEndDate }}
                  </div>
                </div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import {
  getNowMonthLast,
  propYear,
  changeYear,
  getMount,
} from "@/utils/commin";
import { changeDateFormat, changeDateFormat3 } from "@/utils/commin.js";
export default {
  components: {
    FullCalendar,
  },
  props: {
    id: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
      ],
      //   calendarWeekends: true,
      calendarEvents: [
        // initial event data
      ],
      dayMaxEvents: true, // 在dayGrid视图中如果每个单元格事件超出单元格会出现'+more'

      calendarApi: null,

      nowMon: "",
      contentList: [],
      selectMon: "",
      lastDay: "",
      loading: false,
      adList: [],
      imgHeight: 0,
      zanzhuDialog: false,
      htmlStr: "",
      infoData: {},
      activityData: {},
      newsMeetingdata: [],
      newsMeetingdata2: [],
      showAll: false,
      activeClick: "",
      customerTitle: "提示",
    };
  },
  watch: {},
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  methods: {
    goInfo(item) {
      if (item.meetType == "3") {
        this.$router.push({
          path: "/selfCreate/selfMeting",
          query: { mid: item.mid },
        });
      } else {
        this.$router.push({
          path: "/custoMade/index",
          query: { mid: item.mid },
        });
      }
    },
    getCalendarEvents(info, successCallback, failureCallback) {
      const events = [
        ...this.calendarEvents,
        {
          title: info.startStr,
          start: info.start.valueOf(),
        },
      ];
      successCallback(events);
    },

    handleDateClick(arg) {
      this.newsMeetingdata = [];
      this.newsMeetingdata2 = [];
      var clickZoom = arg.jsEvent.target.getAttribute("data-date");
      if (clickZoom) {
        return false;
      } else if (
        !clickZoom &&
        !arg.jsEvent.target.classList.contains("fc-day-number")
      ) {
        return false;
      }
      let newdate = propYear(new Date());
      for (let key in this.activityData.meetings) {
        if (arg.dateStr == key) {
          if (newdate == arg.dateStr) {
            this.newsMeetingdata = this.activityData.meetings[key];
            this.newsMeetingdata2 = [];
            this.newsMeetingdata.forEach((item) => {
              if (item.startTime.indexOf("月") > -1) {
              } else {
                item.startTime = changeDateFormat(item.startTime);
                item.videoEndDate = changeDateFormat(item.videoEndDate);
              }
            });
          } else {
            this.newsMeetingdata2 = this.activityData.meetings[key];
            this.newsMeetingdata = [];
            this.newsMeetingdata2.forEach((item) => {
              if (item.startTime.indexOf("月") > -1) {
              } else {
                item.startTime = changeDateFormat(item.startTime);
                item.videoEndDate = changeDateFormat(item.videoEndDate);
              }

              item.videoMonth = item.startTime.split("月")[0];
              switch (item.startTime.split("月")[0]) {
                case "01":
                  item.videoMonth = "Jan";
                  break;
                case "02":
                  item.videoMonth = "Feb";
                  break;
                case "03":
                  item.videoMonth = "Mar";
                  break;
                case "04":
                  item.videoMonth = "Apr";
                  break;
                case "05":
                  item.videoMonth = "May";
                  break;
                case "06":
                  item.videoMonth = "Jun";
                  break;
                case "07":
                  item.videoMonth = "Jul";
                  break;
                case "08":
                  item.videoMonth = "Aug";
                  break;
                case "09":
                  item.videoMonth = "Sept";
                  break;
                case "10":
                  item.videoMonth = "Oct";
                  break;
                case "11":
                  item.videoMonth = "Nov";
                  break;
                case "12":
                  item.videoMonth = "Dec";
                  break;
                default:
                  break;
              }
            });
          }
        }
      }

      this.calendarApi.refetchEvents();

      var obj = document.querySelectorAll(".fc-day-top");
      for (let i = 0; i < obj.length; i++) {
        const nodeParent = obj[i];
        nodeParent.children[0].style.color = "#333";
        nodeParent.children[0].style.background = "none";
        nodeParent.children[0].style.borderRadius = "none";
        nodeParent.children[0].style.border = "none";
      }

      arg.jsEvent.target.style.color = "#333";
      arg.jsEvent.target.style.background = "#E8F1FF";
      arg.jsEvent.target.style.borderRadius = "50%";
      arg.jsEvent.target.style.border = "1px solid #0C7FF2";

      var objRow = document.querySelectorAll(".fc-content-skeleton");
      for (let i = 0; i < objRow.length; i++) {
        const nodeParent = objRow[i];
        nodeParent.style.background = "none";
        nodeParent.style.borderRadius = "none";
        nodeParent.style.border = "none";
      }
      // end
    },
    // 监听日历，月份切换
    handleMonthChange(event) {
      this.newsMeetingdata = [];
      const text = document.querySelector(".fc-center h2").innerText;
      const strList = text.split(" ");
      this.setMoun(strList);
    },
    setMoun(strList) {
      const monList = [
        //  'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
        { key: "January", value: 1 },
        { key: "February", value: 2 },
        { key: "March", value: 3 },
        { key: "April", value: 4 },
        { key: "May", value: 5 },
        { key: "June", value: 6 },
        { key: "July", value: 7 },
        { key: "August", value: 8 },
        { key: "September", value: 9 },
        { key: "October", value: 10 },
        { key: "November", value: 11 },
        { key: "December", value: 12 },
      ];
      let status = false;
      monList.forEach((item) => {
        if (item.key === strList[0]) {
          this.nowMon = `${strList[1]}年${item.value}月`;
          document.querySelector(".fc-center h2").innerText = this.nowMon;
          this.selectMon = `${strList[1]}/${item.value}/01`;
          this.lastDay = getNowMonthLast(this.selectMon);
          status = true;
          return status;
        }
      });
      if (status) {
        this.getActive(
          this.selectMon,
          propYear(getNowMonthLast(this.selectMon))
        );
      }
    },
    getDate(date) {
      return changeYear(date);
    },
    getDay(date, type) {
      return changeYear(date, type);
    },
    async getActive(start, end) {
      const obj = {
        date: propYear(start),
        imshowId: this.$store.getters.imShowId,
      };
      const list = [];
      const data = await api.home.getComapanyMeetingCalendar(obj);
      this.activityData = data.data;
      if (data.data) {
        let newdate = propYear(new Date());

        for (let key in data.data.meetings) {
          if (newdate == key) {
            this.newsMeetingdata = data.data.meetings[key];
          }
        }
        this.newsMeetingdata.forEach((item) => {
          item.startTime = changeDateFormat(item.startTime);
          item.videoEndDate = changeDateFormat(item.videoEndDate);
        });
        this.$nextTick(() => {
          this.calendarEvents = list;
          this.calendarApi.refetchEvents(); // 重新刷新
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.calendarLeft {
  padding: 16px 15px;
  /* width: 360px; */
}

.rc_body {
  padding: 10px 18px;
  background: url("../../../assets/img/richeng.png") no-repeat;
  background-size: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #203f6c;
  margin-bottom: 8px;
}

.rc_body2 {
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.rc_list {
  padding: 18px 17px 14px 16px;
  background: #f3f6fd;
  margin-bottom: 16px;
}

.rc_list:last-child {
  margin-bottom: 0;
}

.rc_date {
  text-align: center;
  padding: 6px 16px;
  background: #eceef0;
  border-radius: 8px 8px 8px 8px;
  font-weight: 600;
  color: #7e8790;
  font-size: 18px;
  margin-right: 20px;
  margin-left: 20px;
}

.rc_date_y {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  margin-top: 3px;
}

.rc_title {
  font-size: 16px;
  font-weight: 600;
  color: #202933;
  padding-left: 8px;
  border-left: 4px solid #0c7ff2;
  line-height: 15px;
}

.rc_bt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto 4px;
}

.rc_bt2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin: 0 0 10px; */
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid #f0f3f7;
  padding-bottom: 12px;
  /* padding-top: 5px; */
}

.rc_content {
  display: inline-block;
  width: 10.93vw;
  font-size: 14px;
  color: #202933;
  line-height: 24px;
}

.rc_butn {
  cursor: pointer;
  color: #0c7ff2;
}

.container {
  width: auto;
  min-height: calc(100vh - 85px);
  margin: 16px;
  position: relative;

  .el-image {
    padding: 20px 0;
    box-sizing: border-box;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.importantDocuments {
  width: 100%;
  background: #ffffff;
  padding: 10px 0;

  .title {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    height: 55px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    padding-left: 20px;
  }

  .newsList {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }

  .newsLists {
    //height: 390px;
    overflow: hidden;
  }
}

.newsList {
  ::v-deep {
    .fc-left {
      position: absolute;
      right: 20px;
      top: 0px;
    }

    .fc-scroller {
      //height: 280px !important;
    }

    .fc-body {
      margin-top: 10px;
    }

    .fc th,
    .fc td {
      border: none;
    }

    .fc-day-header {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #333;
    }

    .fc-head {
      margin-bottom: 14px;
      display: block;
    }

    .fc-dayGrid-view .fc-body .fc-row {
      min-height: 40px;
      height: 40px !important;
    }

    .fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
      float: none;
      margin: 0 auto;
      cursor: pointer;
    }

    .fc-day-grid-event {
      width: 4px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
      font-size: 0;
      margin: 0 auto;
      flex-shrink: 0;
      padding: 0;
      margin-top: 2px;
    }

    .fc-content {}

    .fc-button:focus,
    .fc-button .focus {
      outline: 0 !important;
      border: none;
      list-style: none;
      box-shadow: none;
    }

    .fc-button {
      outline: 0 !important;
      border: none;
      list-style: none;
    }

    .fc-day-number {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      float: none;
      width: 100%;
      //height: 34px;
      font-size: 14px;
      font-family: DIN;
      color: #333;
      border-radius: 6px !important;

      width: 30px;
      height: 26px;
      box-sizing: border-box;
      // margin: 0 auto;
    }

    // .fc-widget-header{
    //   width: 290px;
    // }

    td {
      border: none;
    }

    .fc-center {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .fc-toolbar h2 {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #000;
    }

    .fc-button-primary:hover {
      outline: none;
    }

    .fc-event {
      border: none;
    }

    .fc-button-primary {
      width: 50px;
      border: none;
      background: #f8fafb;
      border-radius: 0px;
      outline: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #8fc3ff;
    }

    .fc-toolbar.fc-header-toolbar {
      padding: 10px 0;
      // border-bottom: 1px solid #fafafa;
    }

    .fc-button-active {
      background: #4e9ac1;
      color: #fff;
    }

    .fc-button .fc-icon {
      width: 32px;
      height: 30px;
      background: #ecf5ff;
      line-height: 29px;
      text-align: center;
      border-radius: 6px 6px 6px 6px;
    }

    .fc-right {
      margin-top: -80px;
      position: absolute;
      right: 20px;
    }

    .fc-left {
      right: 14px;

      .fc-button-primary {
        background: none;
      }
    }

    .fc-unthemed td.fc-today {
      background: none;
    }

    .fc-content-skeleton .fc-today .fc-day-number {
      background: #0c7ff2 !important;
      border-radius: 6px !important;
      color: #fff !important;
    }
  }
}
</style>